<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style type="text/css">
			img{
				width:500px;
				height:300px;
				position: relative;
			}
		</style>
	</head>
	<body>
		<input type="button" value="隐藏">
		<input type="button" value="显示">
		<input type="button" value="上滑">
		<input type="button" value="下滑">
		<input type="button" value="淡入">
		<input type="button" value="淡出">
		<input type="button" value="自定义">
		<hr>
		<img src="../imgs/a.jpg">
		
		<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript">
		$(function(){
				$("input").click(function(){
					if (this.value=="隐藏") {
						$("img").hide(3000,function(){
							alert("xxx");
						});
					}else if(this.value=="显示") {
						$("img").show(3000);
					}else if(this.value=="上滑") {
						$("img").slideUp(3000);
					}else if(this.value=="下滑") {
						$("img").slideDown(3000);
					}else if(this.value=="淡入") {
						$("img").fadeOut(2000);
					}else if(this.value=="淡出") {
						$("img").fadeIn(2000);
					}else {
						$("img").animate({"left":"100px"},1000)
						.animate({"top":"100px"},1000)
						.animate({"left":"0px"},1000)
						.animate({"top":"0px"});
					}
			})
		})
		</script>
	</body>
</html>



















